<style lang="scss">
.my_group {
  .li18 {
    line-height: 0.18rem;
  }
  .li16 {
    line-height: 0.15rem;
  }
  header {
    li {
      height: 0.5rem;
      &.active {
        color: #e3322c;
      }
    }
  }
  main {
    .class-a {
      position: relative;
      padding-bottom: 0.4rem;
      div {
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 100%;
      }
      &::after {
        content: "";
        position: absolute;
        width: 1.5rem;
        height: 3px;
        background: #fa6260;
        top: 1.2rem;
        left: 50%;
        margin-left: -0.75rem;
      }
    }
    .class-b {
      padding: 0.4rem 0;
      position: relative;
      & > div {
        display: flex;
        justify-content: center;
        align-content: center;
        .imgs {
          width: 0.45rem;
          height: 0.45rem;
          border-radius: 100%;
        }
      }
      .group-money1,
      .group-money2 {
        & > div:first-child {
          padding-bottom: 0.03rem;
        }
      }
      .group-money1 {
        right: 0.85rem;
        top: -0.6rem;
      }
      .group-money2 {
        right: 0.2rem;
        top: 0.7rem;
      }
    }
    .class-c {
      & > div {
        position: relative;
        &:last-child::after {
          width: 0;
        }
        &::after {
          content: "";
          position: absolute;
          width: 0.75rem;
          height: 3px;
          background: #fa6260;
          top: -0.4rem;
          margin-left: 0.38rem;
          left: 0;
        }
      }
    }

    .line-b {
      position: relative;
      &::after {
        content: "";
        position: absolute;
        width: 3px;
        height: 0.4rem;
        background: #fa6260;
        bottom: -0.4rem;
        margin-left: -2px;
        left: 50%;
      }
    }
    .line-t {
      position: relative;
      &::before {
        content: "";
        position: absolute;
        width: 3px;
        height: 0.4rem;
        background: #fa6260;
        top: -0.4rem;
        margin-left: -2px;
        left: 50%;
      }
    }
  }
  footer {
    padding: 0.6rem 0.4rem 0;
    div {
      height: 0.45rem;
    }
  }
  .train-info {
    li {
      padding-bottom: 0.58rem;
      .num {
        width: 0.15rem;
        height: 0.15rem;
        border-radius: 100%;
        border: 1px solid #eee;
      }
    }
  }
}
</style>


<template>
  <div class="my_group full bgfff">
    <header>
      <ul class="flex-col border-b">
        <li class="box1 box-center" :class="{active:list}" @click="cutNav(0)">我的团队</li>
        <li class="box1 box-center" :class="{active:train}" @click="cutNav(1)">团队培训</li>
      </ul>
    </header>
    <div v-show="list">
      <main>
        <div class="class-a box-center padding-tb20 font-16">
          <div class="img-bg line-b box-center cfff" v-for="(it,i) in groupList1" :key="i" 
          :style="{backgroundImage:`url(${it.wximpurl})`}">{{it.username | getUserName(it.wximpurl)}}</div>
        </div>

        <div class="class-b flex-col padding-t20">
          <div class="box1">
          </div>
          <div class="box1" v-for="(it,i) in groupList2" :key="i">
            <div class="img-bg imgs line-b line-t" :style="{backgroundImage:`url(${it.wximpurl})`}">{{it.username | getUserName(it.wximpurl)}}</div>
          </div>
          <!-- <div class="box1">
            <div class="img-bg imgs line-b line-t"></div>
          </div> -->
          <!-- <div class="box1">
            <div class="img-bg imgs line-b line-t"></div>
          </div> -->
          <div class="box1">
          </div>
          <div class="position-a group-money1 flex-row li16">
            <div>一级团队</div>
            <div class="font-12">佣金奖励</div>
            <div class="font-12">房贷*0.5%</div>
          </div>
          <div class="position-a group-money2 flex-row li16">
            <div>二级团队</div>
            <div class="font-12">佣金奖励</div>
            <div class="font-12">房贷*0.5%</div>
          </div>
        </div>
        <div class="class-b class-c flex-col padding-tb20">
          <div class="box1" v-for="(it,i) in groupList3" :key="i">
            <div class="img-bg imgs line-t" :style="{backgroundImage:`url(${it.wximpurl})`}">{{it.username | getUserName(it.wximpurl)}}</div>
          </div>
          <!-- <div class="box1">
            <div class="img-bg imgs line-t"></div>
          </div>
          <div class="box1">
            <div class="img-bg imgs line-t"></div>
          </div>
          <div class="box1">
            <div class="img-bg imgs line-t"></div>
          </div>
          <div class="box1">
            <div class="img-bg imgs line-t"></div>
          </div> -->
        </div>

      </main>
      <footer>
        <div class="bgred cfff bor-r box-center">查看佣金奖励规则</div>
      </footer>
    </div>
    <div v-show="train" class="padding-lr15">
      <div class="tit padding-t15">产品培训</div>
      <div class="padding-tb20 c82 li18 font-12 border-b">{{trainInfo.productTrainContent}}</div>
      <div class="tit padding-t15">业务培训</div>
      <ul class="padding-t20 c82 font-12 train-info li18">
        <li class="flex-col">
          <div class="num box-center">1</div>
          <div class="box1 padding-l15">培训内容第一条培训内容第一条培训内容第一条 培训内容第一条</div>
        </li>
        <li class="flex-col">
          <div class="num box-center">2</div>
          <div class="box1 padding-l15">培训内容第一条培训内容第一条培训内容第一条 培训内容第一条</div>
        </li>
        <li class="flex-col">
          <div class="num box-center">3</div>
          <div class="box1 padding-l15">培训内容第一条培训内容第一条培训内容第一条 培训内容第一条</div>
        </li>
        <li class="flex-col">
          <div class="num box-center">4</div>
          <div class="box1 padding-l15">培训内容第一条培训内容第一条培训内容第一条 培训内容第一条</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "my_group",
  data() {
    return {
      list: true, // 我的团队
      train: false, // 团队培训
      groupList1: [],
      groupList2: [],
      groupList3: [],
      has: true, //是否第一次请求团队培训
      trainInfo: {}
    };
  },
  created() {
    this.teamList();
  },
  mounted() {
    let that = this;
    this.$nextTick(() => {
      // that.teamList();
    });
  },
  filters: {
    getUserName(name, url) {
      if (name) {
        return url ? "" : name.split("")[0];
      }
    }
  },
  methods: {
    cutNav(i) {
      if ((i && !this.train) || (!this.list && !i)) {
        this.train = !this.train;
        this.list = !this.list;
        if (this.has && this.train) {
          this.has = false;
          this.getTrain();
        }
      }
    },
    // 获取我的团队
    teamList() {
      let that = this;
      this.http.post("user/teamList").then(res => {
        that.groupList1[0] = res.data.tbUser;
        for (let i = 0; i < res.data.tbUserDtoList.length; i++) {
          that.groupList2.push(res.data.tbUserDtoList[i].tbUser);
          for (
            let j = 0;
            j < res.data.tbUserDtoList[i].tbUserDtoList.length;
            j++
          ) {
            that.groupList3.push(
              res.data.tbUserDtoList[i].tbUserDtoList[j].tbUser
            );
            if (that.groupList2.length > 5) break;
          }
          // if(that.groupList2.length>3) break;
        }
        if (that.groupList2.length < 3) {
          for (let i = 0; i < 3; i++) {
            that.groupList2.push({ username: " " });
            if (that.groupList2.length === 3) break;
          }
        }
        if (that.groupList3.length < 5) {
          for (let i = 0; i < 5; i++) {
            that.groupList3.push({ username: " " });
            if (that.groupList3.length === 5) break;
          }
        }
        console.log(`
          // ${JSON.stringify(that.groupList1)}================
        // ${JSON.stringify(that.groupList2)}================
        // ${JSON.stringify(that.groupList3)}
        `);
      });
    },
    //获取团队培训
    getTrain() {
      let that = this;
      this.http
        .get("teamtrain/info", {
          location: true
        })
        .then(res => {
          that.trainInfo = res.data;
        });
    }
  }
};
</script>
